<template>
  <div>
    <a-form
      layout="vertical"
      @finish="submit"
      :rules="formRules"
      :model="form"
      ref="formRef"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
    >
      <a-page-header class="pt-0" @back="back" :title="t('填写表单')">
        <template #extra>
          <a-button html-type="submit" type="primary" :disabled="currentStep !== 2">保存</a-button>
        </template>
      </a-page-header>
      <a-spin :spinning="table.loading" class="w-[100%]">
        <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
          <Step></Step>
          <template v-if="currentStep === 0">
            <Base></Base>
          </template>
          <template v-if="currentStep === 1">
            <SelectDevice></SelectDevice>
          </template>
          <template v-if="currentStep === 2">
            <TimeSelector></TimeSelector>
          </template>
        </a-card>
      </a-spin>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, dateFormat, table } from '../data/data';
import { formRef, resetForm, form, formRules } from '../data/form';
import Step from './advertisement/Step.vue';
import Base from './advertisement/Base.vue';
import SelectDevice from './advertisement/SelectDevice.vue';
import { currentStep } from './advertisement/data';
import TimeSelector from './advertisement/TimeSelector.vue';
import { createPublicize, updatePublicize } from '@/api/modules/lcd/publicize';
import { notify } from '@/utils/common/common';
import dayjs from 'dayjs';

const { t } = useI18n();
const back = () => {
  allowEditMenu.value = false;
  reset();
};
const submit = async () => {
  // table.value.loading = true;
  let result: IResponse | undefined = undefined;
  let cloneForm = {
    ...form.value,
  };
  cloneForm.week = form.value.week.join(',');

  if (!form.value.id) {
    /* 添加 */
    const { data } = await createPublicize(cloneForm);
    result = data;
  } else {
    /* 修改 */
    const { data } = await updatePublicize(cloneForm);
    result = data;
  }
  notify(result);
  await list();
  back();
};
const reset = () => {
  resetForm();
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
</style>
